<template>
  <div class="page-dialogAd">
    <filter-view />
    <a-table
      id="classifyTable"
      :pagination="false"
      row-key="id"
      :columns="columns"
      :data-source="state.customConfigList"
      :loading="state.loading"
      :scroll="{ x: 1500 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'sort'">
          <menu-outlined />
        </template>
        <template v-else-if="column.key === 'title'">
          <a-tooltip placement="top" color="#fff">
            <template #title>
              {{ record.title }}
            </template>
            <div class="ellipsis-text">
              {{ record.title || '-' }}
            </div>
          </a-tooltip>
        </template>
        <template v-else-if="column.key === 'logo'">
          <div v-if="record.logo" class="square">
            <!--
            :class="record.logo_shape === 0 ? 'square' : record.logo_shape === 1 ? 'circular' : 'rectangle'"
           -->
            <img :src="getLogo(record.logo)" alt="" class="object-cover square" />
          </div>
          <span v-else>-</span>
        </template>
        <template v-else-if="column.key === 'icon'">
          <div class="w-[25px] h-[25px]" v-if="record.icon">
            <img style="width: 100%; height: 100%" :src="getIcon(record.icon)" alt="" class="object-cover" />
          </div>
          <span v-else>-</span>
        </template>
        <!--
          <template v-else-if="column.key === 'logo_shape'">
          {{ getLogoShape(record.logo_shape) }}
        </template>
         -->
        <template v-else-if="column.key === 'create_at'">
          {{ formatToDateTime(+record.create_at * 1000) }}
        </template>
        <template v-else-if="column.key === 'status'">
          <span>
            <a-switch
              v-model:checked="record.status"
              :checkedValue="1"
              :unCheckedValue="0"
              @change="(checked:any) => editStatus(checked, record)"
            />
          </span>
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <a-button type="link" @click="updateConfig(record)" :disabled="enabled(record.status)">编辑</a-button>
            <a-divider type="vertical" />
            <a-button type="link" @click="deleteConfig(record)" :disabled="enabled(record.status)"> 删除 </a-button>
          </span>
        </template>
      </template>
    </a-table>
    <!-- 删除对话框 -->
    <modal-view
      title="提示"
      v-model:visible="deleteVisible"
      okText="确定"
      cancelText="取消"
      :width="458"
      @confirm="deleteConfirm"
      @cancel="deleteCancel"
    >
      <span>确定要删除该配置吗</span>
    </modal-view>
    <modal-view
      :title="customState.isAdd ? '添加自定义配置' : '编辑自定义配置'"
      v-model:visible="customState.customVisible"
      okText="确定"
      cancelText="取消"
      :width="542"
      :afterClose="afterCloseEdit"
      @confirm="configFormConfirm"
      @cancel="configFormCancel"
    >
      <a-form ref="customConfigRef" :model="customForm" :rules="customRules">
        <a-form-item label="网页Title" name="title">
          <a-input
            v-model:value.trim="customForm.title"
            :maxlength="30"
            class="w-[390px]"
            placeholder="请输入网页Title"
          />
        </a-form-item>
        <a-form-item label="Logo图片" class="mb-6" name="logo">
          <div class="upload-box mb-[-24px]">
            <SketchMap
              placement="bottomLeft"
              style="margin-top: 5px"
              :width="227"
              :height="218"
              :imgSrc="imgSrc"
              text="Logo位置示意图"
            />
            <!--
              <a-form-item name="logo_shape" style="margin: 16px 0">
              <a-radio-group v-model:value="customForm.logo_shape">
                <a-radio :value="0">正方形</a-radio>
                <a-radio :value="1" class="ml-[64px]">圆形</a-radio>
                <a-radio :value="2" class="ml-[64px]">长方形</a-radio>
              </a-radio-group>
            </a-form-item>
             -->
            <a-form-item style="margin-top: 16px" name="logo">
              <NormalUploadImageVue
                fileType="0"
                imgType="0"
                :maxCount="1"
                imgSizeRule="48*48px"
                :imgSrc="customForm.logo"
                fileUrl="v1/common/upload"
                @getImageInfo="getLogoInfo"
              />
            </a-form-item>
          </div>
        </a-form-item>
        <a-form-item label="Icon图片" name="icon" class="mb-6">
          <div class="mb-[-24px] upload-box">
            <SketchMap
              placement="bottomLeft"
              style="margin-top: 5px"
              :width="227"
              :height="218"
              :imgSrc="imgSrc"
              text="Icon位置示意图"
            />
            <a-form-item style="margin-top: 16px">
              <NormalUploadImageVue
                fileType="0"
                imgType="0"
                imgSizeRule="48*48px"
                :imgSrc="customForm.icon"
                fileUrl="v1/common/upload"
                @getImageInfo="getIconInfo"
              />
            </a-form-item>
          </div>
        </a-form-item>
        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="customForm.status">
            <a-radio :value="1" class="mr-[80px]">启用</a-radio>
            <a-radio :value="0">禁用</a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
    </modal-view>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, computed, inject } from 'vue'
import { message } from 'ant-design-vue'
import FilterView from './components/FilterView.vue'
import NormalUploadImageVue from '@/components/components/normal-upload-image/NormalUploadImage.vue'
import { column, LOGO_SHAPE } from './dataSource'
import type { CustomConfigListData } from '@/types/system/customConfig'
import SketchMap from '@/components/components/sketch-map/SketchMap.vue'
import ModalView from '@/components/components/modal/ModalView.vue'
import { customState, customForm, customRules } from './state'
import { useRouter } from 'vue-router'
import apis from '@/apis'
import { formatToDateTime } from '@/utils/format'
import imgSrc from '@/assets/icon/logo-icon.jpg'
import useStore from '@/stores'
const { user } = useStore()
console.log('imgSrc: ', imgSrc)
const {
  system: { list_custom, get_custom, add_custom, update_custom, delete_custom }
} = apis
const configId = ref()
// const imgSrc = `/src/assets/icon/logo-icon.jpg`
const router = useRouter()
const deleteId = ref()
const columns = ref(column)
const customConfigRef = ref()
const deleteVisible = ref(false)
const baseUrl: any = inject('baseUrl')
const state = reactive<{ loading: boolean; customConfigList: CustomConfigListData[] }>({
  loading: false,
  customConfigList: [] as CustomConfigListData[]
})

//获取自定义配置列表接口
const getCustomConfigList = () => {
  state.loading = true
  console.log('getActiveList')
  // 更新列表接口
  list_custom()
    .then((res: any) => {
      state.customConfigList = res.list
      state.loading = false
    })
    .catch(() => {
      state.loading = false
    })
}
const deleteConfig = (item: CustomConfigListData) => {
  console.log('item: ', item)
  deleteId.value = item.id
  deleteVisible.value = true
}
//编辑
const updateConfig = (item: CustomConfigListData) => {
  customState.customVisible = true
  customState.isAdd = false
  configId.value = item.id
  getCustom()
}
const editStatus = (checked: number, row: CustomConfigListData) => {
  console.log('checked: ', checked)
  const data = { ...row }
  data.status = checked
  update_custom(data)
    .then((res: any) => {
      message.success(checked === 1 ? '启用成功' : '禁用成功')
      getCustomConfigList()
      if (checked === 1) {
        row.icon = baseUrl + row.icon
        row.logo = baseUrl + row.logo
        console.log('row: ', row)
        user.setConfigInfo(row)
      } else {
        user.setConfigInfo(row)
      }
    })
    .catch(() => {
      getCustomConfigList()
    })
}
/**
  删除分类对话框事件
 */
const deleteConfirm = (value: any) => {
  console.log('value: ', value)
  delete_custom({ id: deleteId.value }).then(() => {
    deleteVisible.value = value
    message.success('配置删除成功')
    getCustomConfigList()
  })
}
const deleteCancel = () => {
  deleteVisible.value = false
}
const getCustom = () => {
  get_custom({ id: configId.value }).then((res: any) => {
    console.log('res11668: ', res)
    Object.assign(customForm, res.custom_set)
  })
}
const afterCloseEdit = () => {
  customConfigRef.value.resetFields()
}
/**
 添加自定义配置对话框事件
 */
const configFormConfirm = (value: any) => {
  customConfigRef.value.validate().then(() => {
    if (!configId.value) {
      //请求
      console.log('customForm: ', customForm)
      add_custom(customForm)
        .then((res: any) => {
          console.log('customForm: ', customForm)
          console.log(res, 'res')
          getCustomConfigList()
          message.success('新增成功')
          if (customForm.status === 1) {
            customForm.icon = baseUrl + customForm.icon
            customForm.logo = baseUrl + customForm.logo
            console.log('customForm-新增: ', customForm)
            user.setConfigInfo(customForm)
          }
        })
        .catch(() => {
          customState.customVisible = false
        })
    } else {
      update_custom(customForm)
        .then((res: any) => {
          console.log(res, 'res')
          getCustomConfigList()
          message.success('编辑成功')
          customForm.logo = baseUrl + customForm.logo
          if (customForm.status === 1) {
            customForm.icon = baseUrl + customForm.icon
            console.log('customForm-编辑: ', customForm)
            user.setConfigInfo(customForm)
          }
        })
        .catch(() => {
          customState.customVisible = false
        })
    }
    customState.customVisible = false
  })
}
const configFormCancel = () => {
  customState.customVisible = false
}
const getLogoInfo = (val: any) => {
  customForm.logo = val
  customConfigRef.value.clearValidate(['logo'])
}
const getIconInfo = (val: any) => {
  customForm.icon = val
  customConfigRef.value.clearValidate(['icon'])
}
const enabled = computed(() => (status: number) => {
  if (status === 1) {
    return true
  }
  return false
})
//根据类型获取logo图片
const getLogo = computed(() => (src: string) => {
  return baseUrl + src
})
//根据类型获取icon图片
const getIcon = computed(() => (src: string) => {
  return baseUrl + src
})
onMounted(() => {
  getCustomConfigList()
})
</script>
<style lang="less" scoped>
@basicColor: #0083ff;

.circular {
  border-radius: 50%;
  width: 38px;
  height: 38px;
}
.square {
  width: 48px;
  height: 48px;
}
.rectangle {
  width: 48px;
  height: 38px;
}
:deep(.ant-form-item-label) {
  width: 80px;
  text-align: right;
}
.upload-box {
  display: flex;
  flex-direction: column;
}

:deep(.ant-form-item-label > label::after) {
  content: '';
}

.page-dialogAd {
  padding-top: 6px;
  box-sizing: border-box;

  :deep(.ant-table-thead > tr > th) {
    color: #262626;
    font-weight: 500;
  }

  :deep(
      .ant-table-thead
        > tr
        > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not(
          [colspan]
        )::before
    ) {
    width: 0;
  }

  :deep(.ant-table-cell .ant-table-cell-with-append) {
    display: flex;
    align-items: center;
  }

  :deep(.ellipsis-text) {
    max-width: 154px !important;
    white-space: nowrap;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  .basicColor {
    color: @basicColor;
  }
}
</style>
